<template>
  <div>
    <!-- 搜索分类部分 -->
    <div style="margin: 10px 0">
      <el-input style="width: 200px;margin-right: 5px;margin-bottom: 5px" suffix-icon="el-icon-search" placeholder="请输入订单编号" v-model="orderId"></el-input >
      <el-input style="width: 200px;margin-right: 5px;margin-bottom: 5px" suffix-icon="el-icon-search" placeholder="请输入用户id" v-model="orderUser"></el-input >
      <el-select v-model="orderState" clearable placeholder="请选择订单状态" style="width: 200px;margin-right: 5px;margin-bottom: 5px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="orderData" border stripe >
      <!-- <el-table-column type="selection" width="55"  ></el-table-column> -->
      <el-table-column prop="orderId" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="orderUser" label="订单用户" width="70"></el-table-column>
      <el-table-column prop="orderDetail" label="订单详情" width="320"></el-table-column>
      <el-table-column prop="orderAddress" label="订单地址" width="160"></el-table-column>
      <el-table-column prop="orderState" label="订单状态" width="80"></el-table-column>
      <el-table-column prop="orderPrice" label="订单价格" width="120"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="160"></el-table-column>
      <!-- <el-table-column  label="商品状态" width="140" prop="goodsState">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.goodsState" active-color="#13ce66" inactive-color="#ccc"
                     @change="changeEnable(scope.row)">
          </el-switch>
          <span v-text="scope.row.goodsState?'上架中':'已下架'" style="margin-left:2px"></span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="goodsType" label="商品类型"></el-table-column> -->

      <!--编辑、删除操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)" :disabled="orderOption">发货 <i class="el-icon-top"></i></el-button>
          <el-popconfirm
              style="margin-left: 5px"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="handleDelete(scope.row.goodsId)"
          >
            <el-button type="danger" slot="reference">退款 <i class="el-icon-refresh-right"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页区-->
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      orderData:[],
      orderId:'',
      orderUser:'',
      orderState:'',
      orderOption:false,
      options: [{
          value: '未发货',
          label: '未发货'
        }, 
        {
          value: '运输中',
          label: '运输中'
        },{
          value: '已完成',
          label: '已完成'
        }],
      total:0,
      pageNum:1,
      pageSize:5,
    }
  },
  methods:{
    // 页面请求查询数据
    load(){
      this.request.get('/order/page',{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          orderId:this.orderId,
          orderUser:this.orderUser,
          orderState:this.orderState
        }
      }).then(res=>{
        // console.log(res.data);
        this.orderData=res.data.records
        this.total=res.data.total
      })
    },
    //重置搜索框
    reset(){
      this.orderId=''
      this.orderUser=''
      // this.load()
      // this.orderCode()
    },

    // 发货
    handleEdit(val){
      let obj=val
      if(obj.orderState=='未发货'){
        obj.orderState='运输中'
        console.log(obj);
        this.request.post('/order',obj).then(res=>{
          if(res.data){
            this.$message.success("发货成功！")
            this.load()
          }else{
            this.$message.error("发货失败！")
          }
        }) 
      }else{
        this.$message.warning('商品已经发出了~~')
      }
      
      
    },
    


    //#region (分页)
    //分页(一页能容纳的最大数据多少条)
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    //分页(点击跳到多少页)
    handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
    },
    //#endregion

  },
  mounted(){
    this.load()
  }
}
</script>

<style scoped>

</style>